<template>
	<view class="header">
		<view   v-for="(item,index) in add" @click="doAdd">
			<uni-card title="订单详情" sub-title="2024.7.12" extra="已下单">
				<image :src="item.goods.img" style="display: flex;width: 200rpx; height: 200rpx;"></image>
				<view>
					<text class="uni-body">{{ item.goods.name }}</text>
				</view>
				<view>
					<text>￥{{ item.actualPrice }}</text>
				</view>
				<view>
					<text>份数：{{ item.count }}</text>
				</view>
				<view>
					<text>{{ item.remark }}</text>
				</view>
				<view class="miude">
					<button @click="doDelete(item.id)">删除订单</button>
				</view>
				<view>
					<text>总计：{{ totalPrice }}</text>
				</view>
			</uni-card>
		</view>
		<view v-if="add.length!==0" class="footer">
			<text class="total">总计：{{totalPrice}}</text>
			<text class="btn"  @click="doSubmit">结算</text>
		</view>
	</view>
</template>

<script setup>
	
	import  {API_HOST}  from  '/config/const.js'
	
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		computed,
		onMounted,
		ref
	} from 'vue';

	onMounted(() => {
		if(isLogin()){
			doAdd();
		}
	})

	const currentUser = ref('')
	const add = ref([])

	const doDelete = (id) => {
		uni.request({
			url: `${API_HOST}/carts/${id}`, //仅为示例，并非真实接口地址。
			method:'DELETE',
			success: (res) => {
				uni.showToast({
					title:'已经成功',
					duration:2000
				})
			},
		});
	}
	

	const doAdd = () => {
		uni.request({
			url: `${API_HOST}/carts?id`, //仅为示例，并非真实接口地址。
			success: (res) => {
				add.value = res.data
				doAdd()
			},
		});
	}
	
	//判断是否登录
	const isLogin =()=>{
		const  userJson = uni.getStorageSync("loginUser");
		if(userJson){
			currentUser.value = JSON.parse(userJson)
			return true
		}else{
			uni.showToast({
				title:'您还没有登录哦',
				duration:2000
			})
			add.value=[]
			return false
		}
	}
	
	const totalPrice = computed(()=>{
		return add.value.reduce((value,item)=>{
			return   value+item.actualPrice*item.count;
		},0)
	})
	
	
	const query = () =>{
		uin.request({
			url:'${API_HOST}/carts?memberId=${currentUser.value.id}',
			success:(res)=>{
				add.value=res.data
			}
		})
	}
	
	const doSubmit = ()=>{
		uni.request({
			url:'${API_HOST}/orders',
			method:'POST',
			data:{
				memberId:currentUser.value.id,
				totaPrice:totalPrice.value,
				orderDate: new Date(),
				isPay:"0",
				items:add.value
			},
			success:(res)=> {
				uni.showToast({
					title:'订单已经生成',
					duration:2000
				})
				//清空购物车
				add.value.forEach((item,index)=>{
					doDelete(item.id,index)
				})
				
				add.value=[];
			}
		})
	}
	
</script>

<style scoped lang="scss">
	.miude {
		display: flex;
		width: 200rpx;
	}

	.miude button {
		width: 200rpx;
		left: 400rpx;
		bottom: 250rpx;
		background-color: crimson;
		text-align: center;
		color: azure;
	}
	.footer{
		background-color: whitesmoke;
		height: 90rpx;
		position: fixed;
		left: 0;
		bottom: 60rpx;
		right: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20rpx;
		border-radius: 30rpx;
		.total{
			font-weight: bold;
			font-size: 1.2rem;
			line-height: 80rpx;
		}
		.btn{
			font-weight: bold;
			font-size: 1.2rem;
			line-height: 80rpx;
		}
	}
</style>